<template>
  <div>
    <!-- 卡片视图 -->
    <el-card class="box-card">
		<el-row>
			<el-col :span="3" :offset="8"><el-button size="medium" type="primary" icon="el-icon-user" @click="showDialog3">添加班级</el-button></el-col>
		</el-row>
      <!-- 角色列表区域 -->
      <el-table :data="userList" stripe height="500">
		<el-table-column label="#" type="index" />
        <el-table-column label="专业" prop="major" ></el-table-column>
        <el-table-column label="班级" prop="majorClassName" ></el-table-column>
        <el-table-column label="操作" width="300px" align="center">
			<template #default="scope">
			<el-button size="small" type="danger" icon="el-icon-delete" @click="showDialog2(scope.row.major, scope.row.majorClassName)">删除班级</el-button>
			</template>
        </el-table-column>
      </el-table>
    </el-card>


	<!-- 删除用户对话框 -->
	<el-dialog v-model="dialogTableVisible2" title="删除班级"  width="30%" center>
		确定删除班级
      <template #footer>
		<el-button type="primary" @click="deleteUser">确 定</el-button>
        <el-button @click="dialogTableVisible2 = false">取 消</el-button>
      </template>
    </el-dialog>

	<!-- 添加用户对话框 -->
	<el-dialog v-model="dialogTableVisible3" title="添加班级"  width="30%" center>
		<el-form
		ref="form"
		:model="form"
		:rules="rules"
		label-width="80px"
		class="demo-ruleForm">
        <el-form-item label="专业名：" prop="userName">
			<el-input v-model="form.userName" placeholder="请输入专业名" />
		</el-form-item>
		<el-form-item label="班级名：" prop="className">
			<el-input v-model="form.className" placeholder="请输入班级名" />
		</el-form-item>
		</el-form>
      <template #footer>
		<el-button type="primary" @click="submitForm('form')">确 定</el-button>
        <el-button @click="dialogTableVisible3 = false">取 消</el-button>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import request from '../../utils/request'
import { ElMessage } from 'element-plus';
import qs from 'qs'

export default {
	data() {
		return {
			userList: [],
			userName: '',
			className: '',
			form: {
				userName: '',
				className: '',
			},
			dialogTableVisible2: false,
			dialogTableVisible3: false,
			rules: {
				userName: [
					{required: true,message: '请输入专业名',trigger: 'blur'},
					{
						max: 15,
						message: '长度需要小于15',
						trigger: 'blur',
					},
				],
				className: [
					{required: true,message: '请输入班级名',trigger: 'blur'},
					{
						max: 15,
						message: '长度需要小于15',
						trigger: 'blur',
					},
				],
			},
		}
	},
	created() {
		this.getUser();
	},
	methods: {
		showDialog2(userName,className) {
			this.dialogTableVisible2 = true;
			this.userName = userName;
			this.className = className;
		},
		showDialog3() {
			this.dialogTableVisible3 = true;
		},
		// 删除班级
		deleteUser() {
			request({
				method: 'post',
				url: '/api/major-class/delete',
				headers: {
					'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
				},
				data: qs.stringify({
					'majorClass': this.userName,
					'majorClassName': this.className,
				})
			}).then(res => {
				if (res.code === 200) {
					ElMessage.success('删除成功')
					this.getUser()
					this.dialogTableVisible2 = false
				}
				if (res.code === 400) {
					ElMessage.error('该班级存在学生，不能删除')
					this.getUser()
					this.dialogTableVisible2 = false
				}
			})
		},
		// 添加班级
		addUser() {
			request({
				method: 'post',
				url: '/api/major-class/insert',
				headers: {
					'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
				},
				data: qs.stringify({
					'majorClass': this.form.userName,
					'majorClassName': this.form.className,
				})
			}).then(res => {
				if (res.code === 200) {
					this.dialogTableVisible3 = false
					ElMessage.success('添加成功')
					this.getUser()
				}
			})
		},
		// 获取班级列表
		getUser() {
			request.get('/api/major-class/get-all').then(res => {
				this.userList = res.data
			})
		},
		submitForm(form) {
			// eslint-disable-next-line consistent-return
			this.$refs[form].validate((valid) => {
				if (valid) {
					this.addUser()
				} else {
					return false
				}
			})
		},
	}
}
</script>

<style lang="less" scoped>
.box-card {
    height: 590px;
}

</style>
